<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div
                class="test"
                v-bind:class="{ active: isActive, green: isGreen}"
                style="width:200px; height:200px; text-align:center; line-height:200px;">
                hi vue
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    isActive: true,
                    isGreen: true
                }
            })
        </script>
        <style type="text/css">
            .test{
                font-size: 30px;
            }
            .green{
                color: #00FF00;
            }
            .active{
                background: #FF0000;
            }
        </style>
    </body>
</html>